<template>
  <div class="home" style="padding: 10px">

    <!-- 搜索-->
    <div style="margin: 10px 0;">
      <el-form inline="true" size="small">
        <el-form-item label="图书编号">
          <el-input v-model="search1" placeholder="请输入图书编号" clearable>
            <template #prefix>
              <el-icon class="el-input__icon">
                <search/>
              </el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="图书名称">
          <el-input v-model="search2" placeholder="请输入图书名称" clearable>
            <template #prefix>
              <el-icon class="el-input__icon">
                <search/>
              </el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="作者">
          <el-input v-model="search3" placeholder="请输入作者" clearable>
            <template #prefix>
              <el-icon class="el-input__icon">
                <search/>
              </el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="margin-left: 1%" @click="load" size="mini">
            <svg-icon iconClass="search"/>
            查询
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" type="danger" @click="clear">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--借阅学生-->
    <div style="margin: 10px 0;">
      <el-form inline="true" size="small">
        <el-form-item label="学生姓名">
          <el-input v-model="name" placeholder="请输入借阅学生姓名" clearable>
            <template #prefix>
              <el-icon class="el-input__icon">
                <search/>
              </el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="margin-left: 1%" @click="borrowUser" size="mini">
            <svg-icon iconClass="search"/>
            提交
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 数据字段-->
    <el-table :data="tableData" stripe border="true" size="large" @selection-change="handleSelectionChange">
      <el-table-column prop="isbn" label="图书编号" sortable/>
      <el-table-column prop="name" label="图书名称"/>
      <el-table-column prop="price" label="价格" sortable/>
      <el-table-column prop="author" label="作者"/>
      <el-table-column prop="publisher" label="出版社"/>
      <el-table-column prop="createTime" label="出版时间" sortable/>
      <el-table-column prop="borrownum" label="总借阅次数" sortable/>
      <el-table-column prop="status" label="状态">
        <template v-slot="scope">
          <el-tag v-if="scope.row.status == 0" type="warning">已借阅</el-tag>
          <el-tag v-else type="success">未借阅</el-tag>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" v-if="user.role === 2">
        <template v-slot="scope">
          <el-button size="mini" @click="handlelend(scope.row.id,scope.row.isbn,scope.row.name,scope.row.borrownum)"
                     v-if="user.role === 2" :disabled="scope.row.status == 0">借阅
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--测试,通知对话框-->
    <el-dialog
        v-model="dialogVisible3"
        v-if="numOfOutDataBook!=0"
        title="逾期详情"
        width="50%"
        :before-close="handleClose"
    >
      <el-table :data="outDateBook" style="width: 100%">
        <el-table-column prop="isbn" label="图书编号"/>
        <el-table-column prop="bookName" label="书名"/>
        <el-table-column prop="lendtime" label="借阅日期"/>
        <el-table-column prop="deadtime" label="截至日期"/>
      </el-table>

      <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="dialogVisible3 = false"
        >确认</el-button>
      </span>
      </template>
    </el-dialog>
    <!--    分页-->
    <div style="margin: 10px 0">
      <el-pagination
          v-model:currentPage="currentPage"
          :page-sizes="[5, 10, 12]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import request from "../utils/request";
import {ElMessage} from "element-plus";
import moment from "moment";
import router from "@/router";

export default {
  created() {
    this.load()
  },
  name: 'BorrowBook',
  methods: {
    // (this.isbnArray.indexOf(scope.row.isbn)) == -1
    load() {
      this.numOfOutDataBook = 0;
      this.outDateBook = [];
      request.get("/book", {
        params: {
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          search1: this.search1,
          search2: this.search2,
          search3: this.search3,
        }
      }).then(res => {
        console.log(res)
        this.tableData = res.data.records
        this.total = res.data.total
      })
      request.get("/user/alow/" + this.user.id).then(res => {
        if (res.code == 0) {
          this.flag = true
        } else {
          this.flag = false
        }
      })
    },
    clear() {
      this.search1 = ""
      this.search2 = ""
      this.search3 = ""
      this.load()
    },
    borrowUser() {
      request.get("/user/borrow/" + this.name
      ).then(res => {
        this.user = res.data
        if (this.user === null) {
          this.user = {}
          ElMessage.warning("未找到该学生")
          this.load()
          return;
        }
        this.phone = this.user.phone
        this.load()
      })
    },
    handlelend(id, isbn, name, bn) {

      if (this.phone == null) {
        ElMessage.error("借阅失败! 请先将个人信息补充完整")
        // this.$router.push("/person")//跳转个人信息界面
        return;
      }

      if (this.number == 5) {
        ElMessage.warning("您不能再借阅更多的书籍了")
        return;
      }

      if (this.flag == false) {
        ElMessage({
          message: '您没有借阅权限',
          type: 'error',
        })
        return;
      }

      this.form.status = "0"
      this.form.id = id
      this.form.borrownum = bn + 1
      console.log(bn)
      request.put("/book", this.form).then(res => {
        console.log(res)
        if (res.code == 0) {
          ElMessage({
            message: '借阅成功',
            type: 'success',
          })
        } else {
          ElMessage.error(res.msg)
        }
      })

      this.form2.status = "0"
      this.form2.isbn = isbn
      this.form2.bookname = name
      this.form2.readerId = this.user.id
      this.form2.borrownum = bn + 1
      console.log(this.form2.borrownum)
      console.log(this.user)
      let startDate = moment(new Date()).format("yyyy-MM-DD HH:mm:ss");
      this.form2.lendTime = startDate
      console.log(this.user)
      request.post("/LendRecord", this.form2).then(res => {
        console.log(res)
        this.load();

      })
      let form3 = {};
      form3.isbn = isbn;
      form3.bookName = name;
      form3.nickName = this.user.username;
      form3.id = this.user.id;
      form3.lendtime = startDate;
      let nowDate = new Date(startDate);
      nowDate.setDate(nowDate.getDate() + 30);
      form3.deadtime = moment(nowDate).format("yyyy-MM-DD HH:mm:ss");
      form3.prolong = 1;
      request.post("/bookwithuser/insertNew", form3).then(res => {
        console.log(res)
        this.load()
      })
    },

    handleEdit(row) {
      this.form = JSON.parse(JSON.stringify(row))
      this.dialogVisible2 = true
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum
      this.load()
    },
    toLook() {
      this.dialogVisible3 = true;
    },
  },
  data() {
    return {
      phone: '',
      flag: '',
      form: {},
      form2: {},
      form3: {},
      dialogVisible: false,
      dialogVisible2: false,
      search1: '',
      search2: '',
      search3: '',
      name: '',
      total: 10,
      currentPage: 1,
      pageSize: 10,
      tableData: [],
      user: {},
      number: 0,
      bookData: [],
      isbnArray: [],
      outDateBook: [],
      numOfOutDataBook: 0,
      dialogVisible3: true,
    }
  },
}
</script>
